<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
</head>
<body>
	<ul>
		<li>
			<span>奥迪</span>
			<button>点击删除</button>
		</li>
		<li>
			<span>奔驰e300</span>
			<button>点击删除</button>
		</li>
		<li>
			<span>宝马330</span>
			<button>点击删除</button>
		</li>
	</ul>
	<script type="text/javascript">
		/*
			事件委托也叫事件代理，利用事件冒泡的特性，将里面的事件委托给外层的事件，通过事件对象的属性 进行事件委托，改善性能

		*/
		let ul = document.querySelector("ul")
		//ev === > 事件对象：浏览器触发事件的时候，会自动创建一个对象，其中储存了本次事件相关的信息，包括事件类型，时间目标，出发元素等等
		ul.onclick = function(ev){
			//ev.target ev.target永远指向触发事件的dom
			// ev.target.tagName 触发事件的标签 大写
			console.log(ev.target.tagName)
			if(ev.target.tagName === "BUTTON"){
				console.log(ev.target)//<button>点击删除</button>
				ev.target.parentNode.remove()
			}else if(ev.target.tagName === "SPAN"){
				ev.target.parentNode.style.backgroundcolor = "pink"
			}
		}
	</script>
</body>
</html>